<html>
	<head>
		<title>jPopIt Version 1 - Example page</title>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="jpopit.jquery.js"></script>
	</head>
	
	<body>
	
	
	
	
	
	
<!-- SIMPLE -->
			<div id="simple">
				<h3>Simple Examples:</h3>
				
				<button onClick='$.spro.jpopit("This is an example jPop!", false, "left");'>Left</button>
				<button onClick='$.spro.jpopit("This is an example jPop!", false, "bottom");'>Bottom</button>
				<button onClick='$.spro.jpopit("This is an example jPop!", false, "right");'>Right</button>
				<button onClick='$.spro.jpopit("This is an example jPop!", false, "top");'>Top</button> 
				
				<br /><br />
				
				<button onClick='$.spro.jpopit("I will only close when told to do so.", true);'>Right Sticky</button>
				<button onClick='$.spro.jpopit("No Icon on the left of me.", {noIcon: true});'>No Icon</button>  
				<button onClick='$.spro.jpopit("You cant manually close me!", false, "right", {noClose: true});'>No manual close</button> 

				<br /><br />
				
				<button onClick='$.spro.jpopit("#example1");'>Pass an element by id</button> 
				<div id="example1" style="display:none;">You just passed an element!</div>
			</div>
<!-- END SIMPLE -->





<!-- ADVANCED -->		
			<div id="advanced">
				<h3>Advanced Examples:</h3>
				
				<button title="Buggy! Check for duplicates!" onClick='$.spro.jpopit("I have a callback function when I am removed.", {callback: function(e){alert("Removed!" + e);}});'>Custom Callback</button>
				
				<button onClick='$.spro.jpopit("Different Fade in and Fade out times.", {fadeInTime: 200, fadeOutTime: 1000, delay: 1000});'>Custom Fade in, fade out, and delay</button>
				
				<button onClick='$.spro.jpopit("<h4 style=\"padding-bottom:0px;margin-bottom:0px;\">Bruno <small>says:</small></h4>Are you there?", {iconSrc: "http://is.gd/OePx5b", closeSrc: "http://hobbycity.com/hobbycity/store/images/popover-close-button.gif"});'>Different Icons</button>
				
				<button onClick='$.spro.jpopit("Ooh, colors!").css({"background-color":"#FFFFFF", "color":"#000000"});'>Custom color</button>
				
			</div>
<!-- ADVANCED -->






		
		<br /><br />
		
		<div id="footer">
			Questions, comments, bugs? <a href="http://goo.gl/ICp6N" target="_blank">http://shazybot.dyndns.org/services/jQueryPlugins/jpopIt/index.html</a> <br /><br />
			If you don't mind, follow and like us on Facebook! <a href="http://www.facebook.com/ShazyProductions" target="_blank">http://www.facebook.com/ShazyProductions</a> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fshazyproductions&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
		</div>
		
	</body>
</html>